<template>
    <view style="height: 100%; width: 100%;">
        <cu-custom bgColor="bg-gradual-green" :isBack="true">
            <block slot="content">问题详情</block>
            <block slot="backText">返回</block>
        </cu-custom>
        <view class="container">
            <view class="title flex justify-center bg-white solid-bottom">
                <view class="text-xl padding-tb-sm">
                    <text class="text-black text-bold">{{ question.title }}</text>
                </view>
            </view>
            <!-- 问题详情 -->
            <view class="cu-bar bg-white margin-top">
                <view class="action">
                    <text class="cuIcon-titles text-green"></text> 问题详情
                </view>
                <button class="cu-btn shadow bg-green margin-left" @click="changeQu">修改问题</button>
            </view>
            <view class="cu-card dynamic">
                <view class="cu-item shadow">
                    <view class="cu-list menu-avatar">
                        <view class="cu-item">
                            <view class="cu-avatar round lg" :style="{ 'background-image':'url('+(user.avatar?user.avatar:'')+')' }"></view>
                            <view class="content flex-sub">
                                <view>{{ user.username }}</view>
                                <view class="text-gray text-sm flex justify-between">
                                    {{courseName}}
                                </view>
                            </view>
                        </view>
                    </view>
                    <!-- <view class="text-df text-black padding-lr padding-bottom-lg"> -->
                    <view class="text-content">
                        {{ question.content }}
                    </view>
                    <image-grid v-if="question.images.length > 0" :images="question.images"></image-grid>
                </view>
            </view>
            <view class="cu-bar bg-white">
                <view class="action">
                    <text class="cuIcon-titles text-green"></text> 回答与追问
                </view>
            </view>
            <!-- 师生回复的时间线组件 -->
            <qu-dialogue :discussions="discussions"></qu-dialogue>

            <view class="cu-bar input">
                <input @click="inputQu" :disabled="true" class="solid-bottom" placeholder="输入你的追问" style="background-color: rgb(250,250,250);" />
            </view>
            <view id="pop-container" :class="[popAnimation, reverseClass]" v-show="showAppendQu" ref="popContainer">
                <qu-append @append-qu="appendQu($event)" @close="closeAppendQu" :focus="focus"></qu-append>
            </view>
        </view>
    </view>
</template>

<script>
import quDialogue from './quDialogue.vue';
import quAppend from './quAppend.vue';
import imageGrid from './imageGrid.vue';
import {
    TUTOR_API
} from '@/API.js';
import {
    requestDiscussion,
    requestCourseName
} from '../request';

const animationDuration = 500; //ms
export default {
    components: {
        quDialogue,
        quAppend,
        imageGrid,
    },
    onLoad(options) {
        /*
         * question_id: (...)
         * title: (...)
         * content: (...)
         * course_id: (...)
         * chapter_lesson_id: (...)
         * anonymity: (...)
         * images: (...)
         */
        this.question = JSON.parse(decodeURIComponent(options.question));
        requestDiscussion(this.question.question_id).then((res) => {
            this.discussions = res.data;
        });
        uni.$on('reload-question-detail', (newVal) => {
            this.question = newVal;
        });
        requestCourseName(this.question.course_id).then((res) => {
            this.courseName = res;
        });
        console.log(this.question);
    },
    onUnload() {
        uni.$off('reload-question-detail');
    },
    data() {
        return {
            question: null,
            images: null,
            discussions: null,
            courseName: '',
            showAppendQu: false,
            focus: false,
            popAnimation: '', //对应pop-container的动画
            reverseClass: '' //是否是反向的动画
        };
    },
    methods: {
        inputQu: function() {
            this.showAppendQu = true;
            // 下面是调整动画的逻辑
            this.popAnimation = 'animation-slide-bottom';
            setTimeout(() => {
                this.focus = true;
                this.popAnimation = '';
            }, animationDuration);
        },
        appendQu: function(inputValue) {
            // 通过接口返回数据
            uni.request({
                url: TUTOR_API.createDiscussion.url,
                method: TUTOR_API.createDiscussion.method,
                header: {
                    'http-token': getApp().globalData.user.token
                },
                data: {
                    question_id: this.question.question_id,
                    content: inputValue
                },
                success: (res) => {
                    if (res.statusCode == 200) {
                        this.discussions.push(res.data);
                    } else {
                        uni.showToast({
                            icon: 'none',
                            title: res.data
                        });
                    }
                }
            });
            this.closeAppendQu();
        },
        closeAppendQu: function() {
            this.focus = false;
            //下面是调整动画的逻辑
            this.popAnimation = 'animation-slide-bottom';
            this.reverseClass = 'animation-reverse';
            setTimeout(() => {
                this.popAnimation = '';
                this.reverseClass = '';
                this.showAppendQu = false;
            }, animationDuration);
        },
        changeQu: function() {
            // 修改问题
            uni.navigateTo({
                url: '/pages/tutor/quDetail/quModify?question=' + encodeURIComponent(JSON.stringify(
                    this.question))
            });
        }
    },
    computed: {
        user: function() {
            return getApp().globalData.user;
        },
        anonymity: function() {
            if (this.question) {
                return this.question.anonymity;
            } else {
                return 0;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
    $username-left-offset: 20rpx;
    $avatar-length: 96upx;

    .container {
        position: relative;
    }

    .cu-item {
        .title {
            font-size: 32rpx;
            font-weight: 900;
            line-height: 100rpx;
            padding: 0 30rpx;
            text-align: center;
            border-bottom: solid 1rpx rgba(0, 0, 0, 0.3);
        }
    }

    // .cu-card {
    //     > {
    //         .cu-item:nth-child(1) {
    //             background-color: rgb(250, 250, 250) !important;
    //         }
    //     }
    // }

    .cu-list.menu-avatar {
        > {
            .cu-item::after {
                border: none;
            }
        }

        #student-avatar {
            left: 0rpx !important;
        }
    }

    .username {
        position: absolute;
        width: calc(100% - #{$username-left-offset} - #{$avatar-length});
        left:calc(#{$username-left-offset} + #{$avatar-length});
    }

    .cu-list.menu-avatar>.cu-item {
        height: 120rpx;
        background: none;
    }

    .cu-bar {
        display: flex;
        justify-content: start;
    }


    .cu-bar.input {
        position: fixed;
        bottom: 0;
        width: 100%;
        border-bottom: solid 1px #ddd;
        min-height: 80rpx;

        input {
            margin-right: 30rpx;
            border-radius: 10rpx;
            padding: 0 20rpx;
        }
    }

    #pop-container {
        position: fixed;
        width: 100%;
        opacity: 0.96;
        background-color: #000;
        z-index: 10;
        bottom: 0;
    }
</style>
